<template>
	<div class="category">
		<!---搜索框----->
		<div class="m-search">
			<div class="search-box">
				<input class="search-dom" type="text" @input="getSearchResult()" placeholder="请输入搜索内容" v-model="searchObj.name" />
				<button class="btn-search" @click="doSearch()">搜索</button>
				<div class="search-result" v-if="showSearchResult" @click.stop>
					<ul v-for="(item,i) in searchResult" :key="i">
						<li @click="checkedItem(item)">{{item.name}}</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 当前位置导航       -->
		<div class="nav-subs">
			<div class="nav-sub-wrappers">
				<div class="w">
					<ul class="nav-lists">
						<li>
							<router-link to="/">
								<a>首页</a>
							</router-link>
						</li>
						<li>
							<a>游戏专区</a>
						</li>
						<li>
							<a class="active">全部游戏</a>
						</li>
					</ul>
					<div></div>
				</div>
			</div>
		</div>
		<!--- 查询结果展示区------>
		<div v-loading="loading" element-loading-text="无忧账号加载中..." style="min-height: 35vw;">
			<div class="img-item" v-if="!noResult">
				<!--商品-->
				<div class="category-box">
					<el-tabs type="border-card" class="m-tabs-box" @tab-click="handleClick" v-model="defaultTab">
						<el-tab-pane :label="item.groupName" v-for="(item,i) in gameList" :key="i" :data="item">
							<el-col :span="4" v-for="(obj,j) in item.groupData.slice((currentPage-1)*pageSize,(currentPage-1)*pageSize+pageSize)" :key="j">
								<div class="game-item" @click="linkToGame(obj)">
									<img :src="obj.icon" />
									<div class="game-title" :title="obj.name">{{obj.name}}</div>
								</div>
							</el-col>
						</el-tab-pane>
					</el-tabs>
					<el-row>
					</el-row>
				</div>
				<el-pagination v-if="!noResult&&!error" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[6, 12, 18, 24]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
				</el-pagination>
			</div>
			<div class="no-info" v-if="noResult">
				<div class="no-data">
					<img src="/static/images/no-search.png">
					<br> 抱歉！没有为您找到相关的商品
				</div>
			</div>
			<div class="no-info" v-if="error">
				<div class="no-data">
					<img src="/static/images/error.png">
					<br> 抱歉！出错了...
				</div>
			</div>
		</div>
		<right-nav></right-nav>
	</div>
</template>
<script>
	import { listGame } from '/api/index.js'
	import { mapMutations, mapState } from 'vuex'
	import rightNav from '/components/rightNav'
	export default {
		data() {
			return {
				noResult: false, //无结果标识
				error: false, //查询出错标识
				loading: true, //显示加载遮罩标识
				windowHeight: null, //屏幕最大宽度
				windowWidth: null, //屏幕最大高度
				currentPage: 1, //当前页码
				pageSize: 24, //初始分页展示条数(分页功能)
				totalCount: 0, //数据总数(分页功能)
				gameList: [], //所有类型游戏集合
				allGame: [], //全部游戏临时存储（前端搜索功能）
				defaultTab: "0", //页面tabs页默认展示页码
				showSearchResult: false, //是否显示搜索结果
				searchObj: {id:"",name:""}, //搜索值
				searchResult: [] //搜索结果
			}
		},
		computed: {
			...mapState(['navIndex']),
		},
		methods: {
			...mapMutations(['CHANGE_NAV']),
			handleSizeChange(val) {
				this.pageSize = val
			},
			handleCurrentChange(val) {
				this.currentPage = val
			},
			getSearchResult() {
				this.showSearchResult = true;
				var gameArray = this.allGame;
				var _searchResult = [];
				for(var i = 0; i < gameArray.length; i++) {
					var _obj = {};
					var gameName = gameArray[i]["name"];
					if(gameName.indexOf(this.searchObj.name) > -1){
						_searchResult.push(gameArray[i]);
					}
				}
				this.searchResult = _searchResult;
			},
			getListGame() { //获取全部游戏
				listGame().then(res => {
					if(res.code === 200) {
						this.error = false
					} else {
						this.error = true
					}
					this.getAllGame(res.data);
					this.loading = false
				}).catch((e) => {
					console.log(e)
				});
			},
			getAllGame(data) {
				if(data) {
					var _tempList = [];
					this.gameList = data;
					for(var i = 0; i < data.length; i++) {
						var groupObj = data[i];
						try {
							var _groupData = JSON.parse(groupObj.groupData);
							this.gameList[i].groupData = _groupData;
							for(var j = 0; j < _groupData.length; j++) {
								_tempList.push(_groupData[j]);
							}
						} catch(e) {
							console.error(e);
							this.error = true;
						}
					}
					var obj = {
						groupName: "全部游戏",
						groupData: _tempList
					};
					this.allGame = _tempList; //缓存全部游戏
					this.gameList.push(obj);
					var tabIndex = this.$route.query.tabIndex;
					tabIndex = tabIndex ? tabIndex : "0";
					this.setTabDefaultIndex(tabIndex);
					var gameObj = this.gameList[Number(tabIndex)];
					if(Object.keys(gameObj).length > 0){
						//初始化分页
						this.totalCount = gameObj.groupData.length;
					}
				}
			},
			setTabDefaultIndex(tabIndex) {
				this.defaultTab = tabIndex;
			},
			handleClick(tab, event) { //tabs页切换
				var data = tab.$attrs.data.groupData;
				if(data) {
					this.totalCount = data.length;
				}
			},
			checkedItem(item) {
				this.searchObj = item;
				this.showSearchResult = false;
			},
			hideSearchResult() {
				this.showSearchResult = false;
			},
			doSearch() {
				this.$router.push({
					name: 'goodsTransfer',
					params: {
						paramObj: this.searchObj
					}
				})
			},
			linkToGame(item){
				this.$router.push({
		          name: 'game',
		          params: {
		            paramObj: item
		          }
		        })
			}
		},
		created() {

		},
		mounted() {
			this.windowHeight = window.innerHeight
			this.windowWidth = window.innerWidth
			//选中导航为游戏中心
			this.CHANGE_NAV(1);
			this.getListGame();
			//点击其他区域隐藏搜索框
			document.body.addEventListener('click', this.hideSearchResult, false);
		},
		destroyed() {
			document.body.removeEventListener('click', this.hideSearchResult, false);
		},
		components: {
			rightNav
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/style/mixin";
	@import "../../assets/style/theme";
	.category {
		clear: both;
		width: 1100px;
		min-height: 600px;
		height: auto;
		padding: 0 0 25px;
		margin: 20px auto;
	}

	.m-search {
		width: 100%;
		height: 90px;
		margin-top: 40px;
	}

	.search-box {
		width: 360px;
		height: 40px;
		position: relative;
		background-color: white;
		display: flex;
		flex-direction: row;
		border: 2px solid #FF8700;
		float: right;
	}

	.search-dom {
		position: relative;
		width: 260px;
		padding-left: 15px;
	}

	.btn-search {
		width: 100px;
		height: 100%;
		font-size: 16px;
		color: white;
		font-weight: bold;
		letter-spacing: 5px;
		background-color: #FF8700;
		cursor: pointer;
	}

	.search-result {
		height: 300px;
		position: absolute;
		width: 100%;
		background-color: white;
		top: 40px;
		z-index: 9999;
		border: 1px solid #FF8700;
		overflow-y: auto;
	}

	.search-result ul {
		margin: 0;
		padding: 0;
		cursor: pointer;
	}

	.search-result ul li {
		height: 45px;
		padding-left: 10px;
		line-height: 45px;
	}

	.search-result ul li:hover {
		background-color: #FE9013;
		color: white;
	}

	.m-tabs-box {
		width: 100%;
		height: 1035px;
	}

	.category-box {
		>div {
			float: left;
			border: 1px solid #efefef;
		}
	}

	.nav-subs {
		position: relative;
		z-index: 20;
		height: 90px;
		background: #f7f7f7;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
		.nav-sub-wrappers {
			padding: 31px 0;
			height: 90px;
			position: relative;
		}
		.w {
			display: flex;
			justify-content: space-between;
		}
		.nav-lists {
			height: 28px;
			line-height: 28px;
			display: flex;
			align-items: center;
			height: 100%;
			li:first-child {
				padding-left: 0;
				a {
					padding-left: 10px;
				}
			}
			li {
				position: relative;
				float: left;
				padding-left: 2px;
				a {
					display: block;
					// cursor: default;
					padding: 0 10px;
					color: #666;
					&.active {
						font-weight: bold;
						color: #FF8700;
					}
				}
				a:hover {
					color: #FF8700;
				}
			}
			li:before {
				content: ' ';
				position: absolute;
				left: 0;
				top: 13px;
				width: 2px;
				height: 2px;
				background: #bdbdbd;
			}
		}
	}

	.no-info {
		padding: 100px 0;
		text-align: center;
		font-size: 30px;
		display: flex;
		flex-direction: column;
		.no-data {
			align-self: center;
		}
	}

	.game-item {
		width: 90%;
		height: 220px;
		padding: 10px;
		border: 1px solid #D9D9D9;
		margin: 10px;
		cursor: pointer;
	}
	.game-item:hover{
		background-color: #ffecd7;
	}

	.game-item img {
		width: 100%;
		height: 75%;
		border-radius: 15px;
	}

	.game-title {
		height: 50px;
		text-align: center;
		padding-top: 5px;
		overflow: hidden;
	}

	.img-item {
		display: flex;
		flex-direction: column;
	}

	.el-pagination {
		align-self: flex-end;
		margin: 3vw 10vw 2vw;
	}

	@media (min-width: 1px) {
		.nav-subs .nav-sub-wrappers:after {
			display: block;
		}
	}

	@media (max-width: 1340px) {
		body {
			min-width: 1340px;
		}
		.category {
			width: 1000px;
		}
	}

	@media (min-width: 1700px) {
		body {
			min-width: 1470px;
		}
		.category {
			width: 1200px;
		}
	}
</style>
